<script>
import { defineComponent, reactive, toRefs, onMounted } from "vue";
import ModuleCard from "../../../components/ModuleCard.vue";
import ConfigItem from "../../../components/ConfigItem.vue";
import { editConfigLocal, getConfigList } from "@/api/configure.js";
import { useUserStore } from "@/store/modules/user.js";

export default defineComponent({
  components: {
    ModuleCard,
    ConfigItem,
  },
  setup() {
    const state = reactive({
      form: {
        captureFileFormat: "JPEG",
        videoFilePackagingSize: "M256",
        playbackDownloadSavePath: "",
        playbackScreenshotSavePath: "",
        previewScreenshotSavePath: "",
        videoFileSavePath: "",
      },
      baskDisk: [],
    });

    const store = useUserStore();

    const saveLocal = () => {
      editConfigLocal(state.form).then(
        (info) => {
          if (info.code === 200) {
            store.videoFileSavePath = state.form.videoFileSavePath;
            store.playbackDownloadSavePath =
              state.form.playbackDownloadSavePath;
            store.previewScreenshotSavePath =
              state.form.previewScreenshotSavePath;
            store.playbackScreenshotSavePath =
              state.form.playbackScreenshotSavePath;

            ElMessage({
              message: "保存成功",
              type: "success",
              offset: 400,
            });
          } else {
            ElMessage({
              message: info.message,
              type: "warning",
            });
          }
        },
        (err) => {
          ElMessage({
            message: err.message,
            type: "warning",
          });
        }
      );
    };

    onMounted(() => {
      getConfig();
      // getRootDiskAll();
    });

    //获取配置列表
    const getConfig = () => {
      getConfigList(0).then(
        (info) => {
          if (info.code === 200) {
            state.form = info.data.configLocal;
            store.playbackDownloadSavePath =
              info.data.configLocal.playbackDownloadSavePath;
            store.playbackScreenshotSavePath =
              info.data.configLocal.playbackScreenshotSavePath;
            store.previewScreenshotSavePath =
              info.data.configLocal.previewScreenshotSavePath;
            store.videoFileSavePath = info.data.configLocal.videoFileSavePath;
          } else {
            ElMessage({
              message: info.message,
              type: "warning",
            });
          }
        },
        (err) => {
          ElMessage({
            message: err.message,
            type: "warning",
          });
        }
      );
    };

    // const changeDir = (date) => {
    //   if (date.index === "1") {
    //     state.form.videoFileSavePath = date.inputDir;
    //   } else if (date.index === "2") {
    //     state.form.playbackDownloadSavePath = date.inputDir;
    //   } else if (date.index === "3") {
    //     state.form.previewScreenshotSavePath = date.inputDir;
    //   } else if (date.index === "4") {
    //     state.form.playbackScreenshotSavePath = date.inputDir;
    //   }
    // };

    // const getRootDiskAll = () => {
    //   getRootDisk().then((res) => {
    //     let arr = res.map((item) => {
    //       let str = item.slice(0, 2) + "/";

    //       let obj = {
    //         name: str,
    //         zones: [],
    //       };
    //       return obj;
    //     });

    //     state.baskDisk = arr;
    //   });
    // };

    return {
      ...toRefs(state),
      saveLocal,
      getConfig,
      // changeDir,
      // getRootDiskAll,
    };
  },
});
</script>

<template>
  <div class="local-container">
    <module-card title="播放参数">
      <config-item title="抓图文件格式">
        <el-radio-group v-model="form.captureFileFormat">
          <!-- <el-radio value="JPEG">JPEG</el-radio> -->
          <!-- <el-radio value="BMP">BMP</el-radio> -->
          <el-radio :value="0">JPG</el-radio>
          <el-radio :value="1">PNG</el-radio>
        </el-radio-group>
      </config-item>
    </module-card>
    <module-card title="录像文件">
      <config-item title="录像文件打包大小"
        ><el-radio-group v-model="form.videoFilePackagingSize">
          <el-radio value="M256">256M</el-radio>
          <el-radio value="M512">512M</el-radio>
          <el-radio value="G1">1G</el-radio>
        </el-radio-group>
      </config-item>
      <config-item title="录像文件保存路径">
        <el-input
          v-model="form.videoFileSavePath"
          style="width: 240px"
          disabled
        />
      </config-item>
      <config-item title="回放下载保存路径">
        <el-input
          v-model="form.playbackDownloadSavePath"
          style="width: 240px"
          disabled
        />
      </config-item>
    </module-card>
    <module-card title="抓图和剪辑">
      <config-item title="预览抓图保存路径">
        <el-input
          v-model="form.previewScreenshotSavePath"
          style="width: 240px"
          disabled
        />
      </config-item>
      <config-item title="回放抓图保存路径">
        <el-input
          v-model="form.playbackScreenshotSavePath"
          style="width: 240px"
          disabled
        />
      </config-item>
    </module-card>

    <save-button @click="saveLocal" />
  </div>
</template>

<style lang="scss">
.local-container {
  height: 100%;

  .elTree {
    height: 400px;
    overflow: auto;
  }
}
</style>
